<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
</head>

<body>
<h2>示例：组件component2</h2>
<div id="custom-input">

    <h2>在组件上使用 v-model</h2>
    <p>&lt;input v-model="searchText"></p>
    等价于：
    <p>
        &lt;input
        v-bind:value="searchText"
        v-on:input="searchText = $event.target.value"/>
    </p>
    当用在组件上时，v-model 则会这样：
    <p>
        &lt;custom-input
        v-bind:value="searchText"
        v-on:input="searchText = $event"
        >&lt;/custom-input>
    </p>

    <custom-input v-model="searchText"></custom-input>
    <span>searchText: {{ searchText }}</span>
</div>

<script>

    Vue.component('custom-input', {
        props: ['value'],
        template: `
          <input
              v-bind:value="value"
              v-on:input="$emit('input', $event.target.value)"
          >
        `
    })

    new Vue({
        el: '#custom-input',
        data: {
            searchText: ''
        }
    })

</script>
</body>
</html>
